<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="账户明细"></head-title>
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height:windowH+'px'}">
			<nolist v-if="nolist" nolistTxt="暂无账户明细"></nolist>
			<view v-else class="cont">
				<view v-for="(item,index) in listmsg" :key="index" class="list">
					<view class="time">{{item.create_time_HIS}}</view>
					<view class="box">
						<view class="title">
							<view v-if="item.c_type==1">自动折现通知<text class="color_g font_22">(折现率:{{fee}})</text></view>
							<text v-else-if="item.c_type==2">消费通知</text>
							<text v-else>提现通知</text>
						</view>
						<view class="month">{{item.create_time_YMD}}</view>
						<view class="txt flex_row">
							<view class="name">
								<text v-if="item.c_type==1">礼物来源:</text>
								<text v-else-if="item.c_type==2">消费记录:</text>
								<text v-else>提现账户:</text>
							</view>
							<view v-if="item.c_type==3">{{item.c_item}}</view>
							<view v-else><text v-if="item.c_type==2">你赠送给</text><text class="h_color">{{item.other_nickname}}</text>{{item.c_item}}</view>
						</view>
						<view class="txt flex_row">
							<view class="name">
								<text v-if="item.c_type==1">折现金额:</text>
								<text v-else-if="item.c_type==2">消费金额:</text>
								<text v-else>提现金额:</text>
							</view>
							<view>{{item.c_style}}{{item.money}}</view>
						</view>
					</view>
				</view>
				<load :loading="loading" :loadTxt="loadTxt"></load>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	import load from "../../components/load.vue";
	import nolist from "../../components/nolist.vue";
	var session = '',page=1,fullPage=1;
	export default {
		components:{headTitle,load,nolist},
		data(){
			return{
				windowH:0,type:1,listmsg:[],fee:0,
				nolist:false,loading:false,loadTxt:'正在加载...'
			}
		},
		onLoad:function(options){
			this.getHeight();
			if(options.session!=undefined){
				session = options.session;
				page = 1;
				this.getList();
			}
		},
		methods:{
			getHeight:function(){
				var that = this;
				common.network.getHeight(function(h,w){
					that.windowH = h-w/750*142;
				})
			},
			getList:function(){
				var that = this;
				var $data = {
					'type':'zinfo_payment_list',
					'page': page,
					'session':session,
				};
				common.network.request($data,function(res){
					console.log(res);
					that.fee = res.gift_to_money.sel_val;
					fullPage = res.pageData.pagecount;
					that.loading = false;
					var listmsg = that.listmsg;
					that.listmsg = listmsg.concat(res.list);
					if(listmsg.concat(res.list)==''){
						that.nolist = true;
					}else{
						that.nolist = false;
					}
				})
			},
			scrolltolower:function(){
				this.loading = true;
				if(page>=fullPage){
					this.loadTxt = "我是有底线的";
					return false;
				}else{
					this.loadTxt = "正在加载...";
					page ++;
					console.log(page)
					this.getList();
				}
			}
		}
	}
</script>
<style scoped>
	.wrapper{
		background: #F2F3F7;
	}
	.cont{
	}
	.list{
		text-align: center;
	}
	.box{
		background: #fff;
		width: 90%;
		margin: auto;
		text-align: left;
		border-radius: 20px;
		box-shadow: 0 0 20px rgba(33,33,33,0.1);
		box-sizing: border-box;
		padding: 30px;
	}
	.title{
		font-size: 34px;
		font-family: "黑体";
	}
	.time{
		padding: 26px 0;
	}
	.time,.month{
		color: #B0B0B0;
		font-size: 26px;
	}
	.month{
		padding-bottom: 20px;
		padding-top: 10px;
		border-bottom: 1px solid #F2F3F7;
	}
	.txt{
		padding: 20px 0;
		padding-bottom: 18px;
		align-items: flex-start;
	}
	.txt .name{
		min-width: 5em;
		white-space: nowrap;
		width: auto;
	}
	.list .h_color{
		color: #6278FF;
	}
	.money{
		padding-bottom: 10px;
	}
	.money .name{
		margin-right: 20px;
	}
	.n_m_t{
		margin-top: 0;
	}
	.wrapper .font_22{
		font-size: 22px;
	}
	.wrapper .color_g{
		color: #C0C0C0;
	}
</style>
